<template>
  <h1>App</h1>
  <p>{{ counterStore.count }}</p>
  <p>{{ counterStore.oddOrEven }}</p>
  <button @click="handleIncrement">increment</button>
  <button @click="counterStore.increment(1)">increment</button>
</template>

<script lang="ts" setup>
import useCounterStore from "./store/modules/counter";

const counterStore = useCounterStore();

// 所有counterStore数据解构出来，会失去响应式。
// const { count } = counterStore;

const handleIncrement = () => {
  /*
    如果只需要更新数据用：
      直接更新一个数据
      更新多个数据
    如果更新数据前，需要发送请求，就用触发action函数
  */
  // 1. 触发action函数
  // counterStore.increment(1);
  // 2. 直接更新数据
  // counterStore.count++;
  // 3. 更新多个数据
  counterStore.$patch({
    // 使用$patch方法更新，就不要修改原数据
    count: counterStore.count + 1,
    age: counterStore.age + 1,
  });
};
</script>

<style scoped></style>
